<!--
  -
  - +----------------------------------------------------------------------
  - | 友得云客  - 开启房产营销新纪元
  - +----------------------------------------------------------------------
  - | Copyright (c) 2019~2024 优得（西安）信息科技有限公司版权所有
  - +----------------------------------------------------------------------
  - | Licensed 友得云客不是自有软件 未经允许不可移除相关版权
  - +----------------------------------------------------------------------
  - | Author: www.youdeyunke.com
  - +----------------------------------------------------------------------
  -
  -->

<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div>
    <el-dialog :visible.sync="show" title="微信扫一扫" width="600px">
      <div class="body">
        <div class="line"></div>
        <img class="qrimg" :src="qrurl" alt="">
        <el-button type="primary" size="small" icon="el-icon-download" @click="downloadImage">下载二维码</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  computed: {
    qrurl() {
      return this.$store.state.myconfig.xcx_qr
    }
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    showQr() {
      this.show = true
    },
    downloadImage() {
      const imageUrl = this.qrurl;
      const xhr = new XMLHttpRequest();
      xhr.open('GET', imageUrl, true);
      xhr.responseType = 'blob';

      xhr.onload = function () {
        if (xhr.status === 200) {
          const url = window.URL.createObjectURL(new Blob([xhr.response]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'image.jpg'); // 设置下载后的文件名
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      };

      xhr.send();
    },
  },
}
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #d1d1d1;
}

.qrimg {
  margin: 60px auto;
  width: 300px;
  height: 300px;
}
</style>
